<template>
    <div>
      <div class="search-bar">
        <el-form
          :inline="true"
          class="search-form"
          ref="test-form"
          :model="searchForm"
          label-width="auto"
          size="small"
          style="display: flex;
           justify-content: space-between"
        >
          <div class="input-row">
            <el-form-item label="用户账号" class="search-form-item"> 
              <el-input v-model="form.name" placeholder="用户账号"></el-input>
            </el-form-item>
              <!-- 链名称 -->
            <el-form-item :label="$t('recharge.administration.ChainName')" class="search-form-item">
              <el-select v-model="form.type" :placeholder="$t('recharge.administration.pleaseChainName')">
                <el-option :label="$t('recharge.administration.whole')" value="0"></el-option>
                <el-option :label="$t('recharge.administration.Enable')" value="1"></el-option>
                <el-option :label="$t('recharge.administration.Deactivate')" value="2"></el-option>
              </el-select>
            </el-form-item>
             <!-- 平台名称 -->

            <el-form-item :label="$t('recharge.administration.platform')" class="search-form-item">
              <el-select v-model="form.type" :placeholder="$t('recharge.administration.pleaseplatform')">
                <el-option :label="$t('recharge.administration.whole')" value="0"></el-option>
                <el-option :label="$t('recharge.administration.Enable')" value="1"></el-option>
                <el-option :label="$t('recharge.administration.Deactivate')" value="2"></el-option>
              </el-select>
            </el-form-item>
             <!-- 支付方式 -->

            <el-form-item :label="$t('recharge.administration.payment')" class="search-form-item">
              <el-select v-model="form.type" :placeholder="$t('recharge.administration.pleasepayment')">
                <el-option :label="$t('recharge.administration.whole')" value="0"></el-option>
                <el-option :label="$t('recharge.administration.Enable')" value="1"></el-option>
                <el-option :label="$t('recharge.administration.Deactivate')" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="充值时间:" class="search-form-item">
              <el-input v-model="form.name" placeholder="充值时间"></el-input>
            </el-form-item>
            <el-form-item>
              <div class="default-btn primary-btn">{{ $t('crud.searchBtn') }}</div>
              <div class="default-btn">{{ $t('product.reset') }}</div>
            </el-form-item>
          </div>
          <div>
          </div>
        </el-form>
      </div>
      <div>
          <div class="operation-bar">
          <!-- <span v-if="dataListSelections.length" class="had-selected">{{$t('publics.selected')}} {{dataListSelections.length}}</span> -->
          <div class="default-btn primary-btn"  @click="addOrUpdateHandle">新增</div>
          </div>
          <div class="table-con">
        <!-- <el-table
            :data="dataList"
            header-cell-class-name="table-header"
            row-class-name="table-row-low"
            @selection-change="selectionChange"
            style="width: 100%"
            ref="hotTable"
            @select-all="clearAllSelection"
        > -->
        <el-table
            :data="dataList"
            header-cell-class-name="table-header"
            row-class-name="table-row-low"
            style="width: 100%"
            ref="hotTable"
        >
          <el-table-column
            type="selection"
            width="65">
          </el-table-column>
          <el-table-column
           label="交易流水号"
            align="left"
            prop="title">
            <template slot-scope="scope">
              <span class="table-cell-text">{{ scope.row.title }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="content"
            align="left"
            label="充值编号"
          >
            <template slot-scope="scope">
              <span class="table-cell-text">{{ scope.row.content }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="recDate"
            align="left"
            label="链名称"
          >
          </el-table-column>
          <el-table-column
            prop="recDate"
            align="left"
            label="平台名称"
          >
          </el-table-column>
          <el-table-column
            align="left"
            prop="seq"
            label="用户账号"
          >
          </el-table-column>
          <el-table-column
            align="left"
            prop="seq"
            label="充值金额"
          >
          </el-table-column>
          <el-table-column
            align="left"
            prop="seq"
            label="支付方式"
          >
          </el-table-column>
          <el-table-column
            align="left"
            prop="seq"
            label="充值时间"
          >
          </el-table-column>
          <el-table-column
            align="left"
            prop="seq"
            label="订单状态"
          >
          </el-table-column>
         
      
        </el-table>
      </div>
      </div>
    </div>
  </template>
  
  <script>
  
  
  
  export default {
      components: {
        
    },
  
    data() {
      return {
          dataList:[],
        //返回的参数
        itemInOf: "",
        Adminshow:false,
        form: {
          type: "",
          region: "",
          name: "",
          DAWname: "",
        },
     
     
      };
    },
    mounted() {
    },
    methods: {

      addOrUpdateHandle(){
          this.Adminshow = true
        this.$nextTick(() => {
          this.$refs.management.init()
        })
      },
    
    
  
  
    
      
  
    
  
  
    
    },
  };
  </script>
  
  <style scoped>
  .categoryManagement {
    width: 95% !important;
    margin: 30px auto 0;
  }
  .categoryManagement-table-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 30px 0;
  }
  .categoryManagement-table-header div {
    display: flex;
    flex-direction: row;
  }
  .categoryManagement-table-header div .input {
    margin-right: 15px !important;
  }
  
  .categoryManagement >>> .has-gutter tr th .cell {
    text-align: center;
  }
  .categoryManagement >>> .el-table__row td .cell {
    text-align: center;
  }
  </style>